<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
  <h3 class="modal-title">修改密码</h3>

  <div class="modal-body modal-height">
    <form clrForm #passform="ngForm">
      <clr-password-container>
        <label>原密码:</label>
        <input clrPassword size=45 type="password" minlength="6" maxlength="30"
               [(ngModel)]="original" name="old" required>
      </clr-password-container>

      <clr-password-container>
        <label>
          新密码:
        </label>
        <input clrPassword size=40  type="password" [(ngModel)]="password" name="name"
               pattern="^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$" (change)="checkPassword()" required>
        <clr-control-helper *ngIf="!checkPassword() && password &&confirmPassword">密码不一致！</clr-control-helper>
        <clr-control-error>有效密码:6-30位,英文字母+数字+特殊字符(可选)</clr-control-error>
      </clr-password-container>

      <clr-password-container>
        <label>确认新密码:</label>
        <input clrPassword size=40 minlength="6" maxlength="30" type="password" [(ngModel)]="confirmPassword"
               name="name"
               pattern="^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{6,18}$" (change)="checkPassword()" required>
        <clr-control-helper *ngIf="!checkPassword() && password &&confirmPassword">密码不一致！</clr-control-helper>
        <clr-control-error>有效密码:6-30位,英文字母+数字+特殊字符(可选)</clr-control-error>
      </clr-password-container>

      <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
        <button type="submit" class="btn btn-primary" (click)="onSubmit()" [disabled]="passform.invalid">
          <i *ngIf="submitGoing" class="fa fa-spinner fa-pulse"></i>提交
        </button>
      </div>
    </form>
  </div>
</clr-modal>
